<template>
    <el-container>
        <el-header style="background-color: #42b983;display: flex;">
            <div style="width: 100px;margin-top: 10px" >
                <el-avatar size="70" :src="require('@/assets/img/'+avatar+'')"></el-avatar>
            </div>

            <div style="margin-top: 20px;font-size: larger;margin-right:10px">{{account}}</div>
            <div    style="width: 100%">
                <el-menu
                        :default-active="activeIndex2"
                        class="el-menu-demo"
                        mode="horizontal"
                        @select="handleSelect"
                        background-color="#545c64"
                        text-color="#fff"
                        active-text-color="#ffd04b"
                        :router="true">
                    <el-menu-item index="1" route="index">首页</el-menu-item>
                    <el-menu-item index="3" route="userPetStorageRequest">寄养宠物</el-menu-item>
                    <el-menu-item index="4" route="userUpdate">修改个人信息</el-menu-item>
                </el-menu>
            </div>


        </el-header>

    <el-main style="background: #e0eee8">

        <div style="float:left;margin-left:70px;width: 250px;height: 500px;
                    background:#FFFFFF;">

            <div>
                <div class="left_bar_block" style="width: 250px;height: 100px" v-for="v in listType" :key="v">
                    <div class="class_1" style="float: left;margin-top: 20px;margin-left: 25px" >
                        <router-link :to="{path:'/details',query:{name:v.kname}}" style="text-decoration: none">
                            <a style="font-size: 25px">{{v.kname}}</a>
                        </router-link>
                    </div><br>
                    <div class="class_2" style="float: left;margin-top:10px;margin-left:10px;width: 250px;">
                        <li  v-for="s in v.types" :key="s" style="float:left;padding-left: 10px">
                            <router-link :to="{path:'/details',query:{name:s.sname}}" style="text-decoration: none">
                                <a>{{s.sname}}</a>
                            </router-link>
                        </li>
                    </div>
                </div>
            </div>
        </div>

        <div style="height:500px;">
<!--        //图片展示-->
        <el-carousel :interval="3000" height="500px" style="float:right;width:1000px;margin-right:43px;">
            <el-carousel-item v-for="(item,index) in tableData" :key="index+'a'" >
                    <el-image
                            :src="require('@/assets/img/'+item.img)"
                            style="height: 450px;width: 1000px"
                            @click="lingyang(item.id)"
                    ></el-image>
                <lable style="font-size: larger">{{item.info}}</lable>
            </el-carousel-item>
        </el-carousel>
        </div>

        <div style="width:1350px;height:500px;background-color: #e0eee8;float: left">

            <div style="border: 1px solid green;width: 20px;height: 20px;background: green;
                margin-top: 20px;margin-left: 100px"></div>

            <h2 style="margin-top: -28px;margin-left: -980px">热们宠物</h2>

            <el-pagination
                    @current-change="changePage"
                    background
                    layout="prev, pager, next"
                    :total="1000">
            </el-pagination>



        </div>
    </el-main>

    </el-container>
</template>

<script>
    export default {
        name: `Index`,
        data() {
            return {
                list: [],
                listType: [
                    {
                        kname: '猫咪',
                        types: [{sname: '狸花猫'}, {sname: '橘猫'}, {sname: '布偶猫'}]
                    }, {
                        kname: '狗狗',
                        types: [{sname: '哈士奇'}, {sname: '拉布拉多犬'}]
                    }, {
                        kname: '水族',
                        types: [{sname: '乌龟'}, {sname: '金鱼'}]
                    }, {
                        kname: '小宠',
                        types: [{sname: '蟋蟀'}]
                    }, {
                        kname: '爬虫',
                        types: [{sname: '鳄龟'}]
                    }],
                goods: [],
                account: '',
                userId: '',
                avatar: "",
                tableData: [],
                index: "",

            }
        },
        mounted() {
            // 从sessionStore中获取数据
            this.userId = sessionStorage.getItem("userId");
            this.account = sessionStorage.getItem("account");
            this.avatar = sessionStorage.getItem("avatar");
            console.log("首页  钩子函数" + this.avatar)
            console.log(this.account)
            this.$http.get("http://localhost:8081/pet/getAllPetNoAdopted?index" + this.index + "").then(req => {
                console.log("get" + "  " + this.index)
                //给data中的tableDat赋值
                this.tableData = req.data.list;
                this.index = req.data.index;
                console.log(this.tableData)
            })
        },

        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            lingyang(id) {
                console.log("领养：" + id)
                let adoption = confirm("是否领养")
                if (adoption) {
                    console.log("领养")
                    this.$http.get("http://localhost:8081/adoption/requestAd?pet_id=" + id + "&adopter_id=" + this.userId).then(req => {
                        if (req.data) {
                            alert("已申请")
                        }
                    })
                }

            },
            changePage(index) {
                console.log("change paeg" + index)
                this.$http.get("http://localhost:8081/pet/getAllPetNoAdopted?index=" + index + "").then(req => {
                    //从后台的map中获取list给data中的tableData赋值
                    this.tableData = req.data.list;
                    //从后台的map中获取index给data中的index赋值
                    this.index = req.data.index;
                })
            },
        }
    }
</script>

<style scoped>
    ul,li,ol{
        list-style: none;
    }
    .left_bar_block:hover{
        background:#efefef;
    }
    .left_bar_block a{
        color: #333333;
    }
    .left_bar_block a:hover{
        color: #42b983;
    }

    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 150px;
        margin: 0;
    }


</style>
